<template>
	<el-popover placement="bottom" title="Title" :width="300" trigger="click"
		content="this is content, this is content, this is content">
		<template #default>
			<slot></slot>
		</template>
		<template #reference>
			<el-badge :value="value" :max="max" :is-dot="isDot">
				<component :is="`el-icon${toLine(icon)}`"></component>
			</el-badge>
		</template>
	</el-popover>
</template>

<script lang="ts" setup>
	import { toLine } from '../../../utils'
	let props = defineProps({
		// 显示的图标
		icon: {
			type: String,
			default: 'Bell'
		},
		// 通知数量
		value: {
			type: [String, Number],
			default: '1'
		},
		// 最大值
		max: {
			type: Number
		},
		// 小圆点
		isDot: {
			type: Boolean,
			default: false
		}
	})
</script>

<style lang="scss" scoped>
</style>